<template>
  <div> 
      <div class="loading" v-if="show">
         <van-loading size="24px">加载中...</van-loading>
      </div>
     <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
      <div class="nowPlayingList-wrap">
        <ul class="nowPlayingList">
            <li class="nowPlayingFilm-item" v-for="(i , index) in broadcast" :key="index" @click="details(i.filmId)">
              <span prevent href="" class="nowPlayingFilm-wrap">
                <div class="lazy-img-wrap" style=" width: 66px; height: 94px; background: rgb(249, 249, 249);">
                  <img class="target-img" :src="i.poster" alt=""/>
                </div>
                <div class="nowPlayingFilm-info">
                  <div class="nowPlayingFilm-name info-col">
                    <span class="name">{{i.name}}</span>
                    <span class="item">{{i.item.name}}</span>
                  </div>
                  <div class="nowPlayingFilm-grade info-col" style="">
                    <span class="label">观众评分 </span>
                    <span class="grade">{{i.grade}}</span>
                  </div>
                  <div class="nowPlayingFilm-actors info-col">
                    <span class="label" v-for="(t ,index) in i.actors" :key="index">{{t.name}}</span> 
                  </div>
                  <div class="nowPlayingFilm-detail info-col">
                    <span class="label">{{i.nation}} | {{i.runtime}} 分钟</span>
                  </div>
                </div>
                <div class="nowPlayingFilm-buy" style="right">购票</div>
              </span>
            </li>
        </ul>
      </div>
    </van-list>
  </div>
</template>

<script>
import { CurrentlyMovie } from '@/api/index.js'
import { reactive, toRefs ,onMounted, computed} from 'vue'
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
  name:'Showing',
  setup(props) {
    const state = reactive({
      broadcast: [],
      show:true,
        // 每当下一页数据请求回来之后，要把loading从true改为false ，true的情况下会一直请求
      loading: false,
      // 所有数据是否加载完毕了，如果没有更多数据，要把finished改成true
      finished: false,
      pageNum:1,
    });
      const HotShowingList = async ()=>{
      const { data:res } = await CurrentlyMovie( state.pageNum , { id:store.state.city.cityId,  pageSize:10, type:1, k:2063506});
     
        state.broadcast = [...state.broadcast,...res.data.films]
        state.loading = false;
        state.show=false

       if(res.data.films.length === 0){
         state.finished=true;
       } 
    }

    const store  = useStore();
    const router = useRouter();
    const details = (id)=>{
      router.push(`/cinemas/${id}`)
    }

    const onLoad = (()=>{
     state.pageNum++
     HotShowingList()
    })

    onMounted(()=>{
      HotShowingList()
    })

    return {
      ...toRefs(state),
      onLoad,
      details
    }
  }
}
</script>

<style lang='less' scoped>
.nowPlayingList-wrap {
  background-color: rgb(244, 244, 244);
  .nowPlayingList {
    // padding-top: 50px;
    background: rgb(255, 255, 255);
    overflow: hidden;
  
  }
  .nowPlayingFilm-item {
    padding: 15px 15px 15px 0;
    position: relative;
    background: white;
    margin-left: 15px;

    .nowPlayingFilm-wrap {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  .target-img {
    height: 100%;
  }
  .nowPlayingFilm-info {
    width: calc(100% - 116px);
    padding: 0 10px;
  }
  .info-col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;

    .name {
      max-width: calc(100% - 25px);
      color: #191a1b;
      font-size: 16px;
      height: 22px;
      line-height: 22px;
      margin-right: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .item {
      font-size: 9px;
      color: #fff;
      background-color: #d2d6dc;
      height: 14px;
      line-height: 14px;
      padding: 0 2px;
      border-radius: 2px;
    }
  }
  .nowPlayingFilm-name span {
    display: inline-block;
    vertical-align: middle;
  }
  .label {
    font-size: 13px;
    margin-top: 4px;
    color: #797d82;
  }
  .grade {
    color: #ffb232;
    font-size: 14px;
  }
  .nowPlayingFilm-buy {
    line-height: 25px;
    height: 25px;
    width: 50px;
    color: #ff5f16;
    font-size: 13px;
    text-align: center;
    border-radius: 2px;
    position: relative;
  }
  .nowPlayingFilm-buy:after {
    content: " ";
    transform: scale(0.5);
    position: absolute;
    border: 1px solid #ff5f16;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border-radius: 4px;
  }
  .nowPlayingFilm-item:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
  }
}
// // 清除浮动
// .clear:after {
//   content: "";
//   display: block;
//   height: 0;
//   clear: both;
//   visibility: hidden;
// }
.loading{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>